<template>
  <div>
    <a-row>
      <a-col :span="24" v-for="(item, index) in props.list" :key="item.account_id">
        <a-row justify="space-between" class="video-list"  :wrap="false">
          <a-col>
            <a-row :wrap="false">
              <a-col class="video-box" @click="viewVideoClick(item)">
                <div class="img_box">
                   <div class="rankink" :style="{
                    'background': sortBgcolor[index]
                   }" v-if="index<=3">{{ index + 1 }}</div>
                   <img
                     :src="item.film_video?.multimedia?.cover_url"
                     class="video-cover"
                   />
                 </div>
                <div class="mask">
                  <play-circle-outlined />
                </div>
              </a-col>
              <a-col class="video-introduction">
                <div class="video-title" v-if="item.film_video?.title.length<=30">{{item.film_video?.title}}</div>
                <a-popover>
                  <template #content>
                    <div style="width: 600px;">
                    {{ item.film_video?.title }}
                    </div>
                  </template>
                <div class="video-title" v-if="item.film_video?.title.length > 30">{{ item.film_video?.title }}</div>
                </a-popover>
                <div class="video-time">{{ item.film_video?.expected_release_time || item.film_video?.release_time }}</div>
                <div>
                  <a-row :gutter="[24, 16]" class="video-area"  :wrap="false">
                    <a-col class="video-play">
                      <a-row :gutter="[4, 16]" align="middle">
                        <a-col>
                          <img :src="$utils.staticPath + 'images/workAi/datacenter/plays.png'" class="video-img" />
                        </a-col>
                        <a-col class="num_text">{{ meowNumberFormatter(item.total_plat_count)}}  </a-col>
                      </a-row>
                    </a-col>
                    <a-col class="video-comment-num">
                      <a-row :gutter="[4, 16]" align="middle">
                        <a-col>
                          <img :src="$utils.staticPath + 'images/workAi/datacenter/comment_num.png'" class="video-img" />
                        </a-col>
                        <a-col class="num_text">{{ meowNumberFormatter(item.total_comment_count) }}</a-col>
                      </a-row>
                    </a-col>
                    <a-col class="video-comment-like-num">
                      <a-row :gutter="[4, 16]" align="middle">
                        <a-col>
                          <img :src="$utils.staticPath + 'images/workAi/datacenter/like_num.png'" class="video-img"  />
                        </a-col>
                        <a-col class="num_text">{{ meowNumberFormatter(item.total_like_count) }}</a-col>
                      </a-row>
                    </a-col>
                    <a-col class="video-comment-like-num">
                      <a-row :gutter="[4, 16]" align="middle">
                        <a-col>
                          <img :src="$utils.staticPath + 'images/workAi/datacenter/share.png'" class="video-img"  />
                        </a-col>
                        <a-col class="num_text">{{meowNumberFormatter(item.total_share_count) }}</a-col>
                      </a-row>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </a-col>
          <a-col
            style="
              display: flex;
              flex-direction: column;
              justify-content: end;
              color: #888888;
            "
          >
            <a-col>
              <a-row :gutter="[4, 16]" align="middle">
                <a-col>
                  <img :src="item.platform_account?.platform?.image" class="avatar" />
                </a-col>
                <a-col>
                  <img :src="item.platform_account?.avatar" class="avatar"/>
                </a-col>
                <a-col>{{ item.platform_account?.nickname }}</a-col>
              </a-row>
            </a-col>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 视频预览 -->
    <viewVideo ref="viewVideoRef" :scriptExport="true" /> 
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
import { PlayCircleOutlined,MessageOutlined,HeartOutlined} from "@ant-design/icons-vue";
import { Chart } from "@antv/g2";
import utils from "@/common/utils/utils.js";
import request from "@/common/utils/request";
// 视频预览组件
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";
const viewVideoRef = ref(null);
import {meowNumberFormatter} from '@/common/utils/atherUtils.js'

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const viewVideoClick=(item)=>{
  viewVideoRef.value.open(item.film_video?.multimedia?.material_url)
}

const sortBgcolor = reactive({
  0: '#ff2752',
  1: '#ff7f12',
  2: '#ffc800',
  3: '#a3a1a3'
})

</script>

<style lang="less" scoped>
.video-list {
  margin-top: 20px;
  width: 100%;
  .avatar{
    width: 20px;
    height: 20px;
    border-radius: 5px
  }
  .video-box{
    position: relative;
    cursor: pointer;

    .mask{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      color: #fff;
      z-index: 9;
      border-radius: 8px;
      display: none;
    }
    &:hover{
      .mask{
        display: flex;
      }
    }
  }

  .img_box {
    position: relative;
    .rankink{
      position: absolute;
      padding: 0 6px;
      padding-left: 3px;
        top: 0;
        left: 0;
        border-radius: 8px 0 15px 0;
        color: #fff;
    }
    .video-cover {
      width: 60px;
      height: 80px;
      border-radius: 10px;
      overflow: hidden;
      object-fit: cover;
    }
  }

  .video-introduction {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .video-title {
      font-weight: bold;
      display: inline-block;
      white-space: nowrap; 
      width: 400px; 
      overflow: hidden;
      text-overflow:ellipsis;
    }
    .video-time {
      color: #888888;
    }

    .num_text{
      padding-top: 4px;
    }

    .video-area {
      color: #888888;
      .video-img{
        width: 14px;
        height: 14px;
      }
    }
  }
}
</style>
